<template>
  <div class="InfoMain">
    <div class="bread" style="height: 50px;background: 	#77DDFF">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item style="font-weight: bold;">公司后端</el-breadcrumb-item>
        <el-breadcrumb-item style="font-weight: bold;">基本信息</el-breadcrumb-item>
        <el-breadcrumb-item style="font-weight: bold;">公司信息</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <!-- 添加header部分 -->
    <div class="content-container" style="display: flex; width: 100%; flex-direction: column; height: 100%;">
      <div class="form-grid-container" style="width: 100%; flex: 1; overflow-y: auto;height: 50%">
        <span class="register-title">公司信息</span>
        <el-form ref="form" :model="form" label-width="120px">
          <el-row>
            <el-col :span="12">
              <el-form-item label="公司名称:">
                <label style="width: 300px;">{{ form.name }}</label>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="公司规模">
                <label style="width: 300px;">{{ form.size }}</label>
              </el-form-item>
            </el-col>
          </el-row>
          <el-form-item label="公司简介">
            <label style="height: 400px">{{ form.description }}</label>
          </el-form-item>
          <el-form-item label="公司邮箱">
            <label>{{ form.email }}</label>
          </el-form-item>
        </el-form>
      </div>
      <!-- 右半部分整体容器，修改为左右布局 -->
      <div class="right-container" style="width: 100%; display: flex; flex: 1;">
        <!-- 左边部分，放置公司商标 -->
        <div class="right-left" style="flex: 1; display: flex; justify-content: center; align-items: center;">
          <img :src="form.brand" style="width: 250px; height: 200px;">
        </div>
        <!-- 右边部分，放置营业执照 -->
        <div class="right-right" style="flex: 1; display: flex; justify-content: center; align-items: center;">
          <img :src="form.license" style="width: 250px; height: 200px;">
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import axios from "axios";

export default {
  name: "companyInfo",
  data() {
    return {
      form: {
        account: "",
        password: "",
        name: "",
        size: "",
        license: "",
        brand: "",
        description: "",
        email: ""
      }
    }
  },
  methods: {
    fetchCompanyInfo() {
      axios.get(`/api/company/findCompany/${this.$store.state.companyId}`).then(resp => {
        this.form = resp.data;
      })
    }
  },
  mounted() {
    this.fetchCompanyInfo();
  },
}
</script>

<style>
.InfoMain {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.header {
  background-color: #f0f0f0;
  text-align: right;
  padding: 15px 0;
  border-bottom: 1px solid #ccc;
  flex-shrink: 0; /* 防止header被压缩，始终保持原有高度 */
}

.form-grid-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.register-title {
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 20px;
}

/* 右半部分整体容器样式 */
.right-container {
  height: 100%;
  display: flex;
}

/* 右半部分左边容器样式 */
.right-left {
  background-color: #f5f5f5;
}

/* 右半部分右边容器样式 */
.right-right {
  background-color: #f5f5f5;
}
</style>
